﻿.layout {
}

    /***/
    .layout .left-panel {
        width: 300px;
        background-color: #f5f6f7;
        border: none;
        padding: 5px 5px 5px 5px;
    }

        .layout .left-panel .toolbar-panel {
            padding-top: 1px;
            border-bottom: 1px solid #ccc;
            height: 50px;
            background-color: white;
            border-radius: 10px;
            display: flex;
            align-items:center;
        }

            .layout .left-panel .toolbar-panel .btns {
                height: 30px;
                line-height: 30px;
                border-radius: 18px;
                text-align: center;
                font-size: 1em;
                border: solid 1px #ccc;
                color: grey;
                margin-left: 10px;
                cursor: pointer;
            }

            .layout .left-panel .toolbar-panel .back-button {
                padding-left: 20px;
                padding-right: 20px;
            }

            .layout .left-panel .toolbar-panel .active-button {
                padding-left: 10px;
                padding-right: 10px;
                border: none;
                background-color: orangered;
                color: white;
            }

            .layout .left-panel .toolbar-panel .save-button {
                padding-left: 10px;
                padding-right: 10px;
                background-color: #0876e9;
                color: white;
            }

            /*....*/
        .layout .left-panel .image-panel {
            margin-top:10px;
            background-color: rgb(244 239 239 / 0.00);
            border-radius: 10px;
            box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
        }

            .layout .left-panel .image-panel .upload-btn {
                height: 25px;
                line-height: 25px;
                border: none;
                border-radius: 18px;
                text-align: center;
                padding-left: 10px;
                padding-right: 10px;
                color: white;
                background-color: orangered;
                cursor: pointer;
                outline: none;
            }

            .layout .left-panel .image-panel .image-list {
            }

            .layout .left-panel .image-panel .image-item {
                margin-bottom: 20px;
                border: solid 1px #ddd;
            }

                .layout .left-panel .image-panel .image-item .img {
                    width: 100%;
                    height: 130px
                }

                .layout .left-panel .image-panel .image-item .img-name {
                    color: rebeccapurple;
                    overflow: hidden;
                    height: 20px;
                    line-height: 20px;
                    font-size: 0.8em;
                    display: flex;
                    justify-content: space-between;
                }

                    .layout .left-panel .image-panel .image-item .img-name .remove {
                        color: red;
                        margin-left: 5px;
                        margin-right: 5px;
                        cursor: pointer;
                        float: left;
                        margin-top: 5px;
                    }

                    .layout .left-panel .image-panel .image-item .img-name .anme {
                        float: left;
                        width: 110px;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                    }

    /***/
    .layout .center-panel {
        border: none;
        background-color: #f5f6f7;
        padding: 5px 5px 5px 5px;
    }


    /*attributes*/
    .layout .center-panel .attributes-panel {
        font-size: 1.2em;
        width: 1000px;
        border-radius: 5px;
        box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
        background-color: white;
        margin-bottom: 5px;
        padding-bottom: 5px;
    }

    .layout .center-panel .title-panel {
        border-bottom: solid 1px #ccc;
        margin-left: 50px;
        margin-right: 50px;
        line-height: 50px;
        margin-bottom: 5px;
    }

        .layout .center-panel .title-panel .title {
            height: 40px;
            line-height: 40px;
            border: none;
            outline: none;
            font-size: 1.5em;
            padding-left: 15px;
            padding-right: 15px;
            width: 97%;
        }

    .layout .center-panel .attributes {
        display: table;
        width: 100%;
        clear: both;
    }

        .layout .center-panel .attributes .attr-row {
            display: table-row;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

            .layout .center-panel .attributes .attr-row .attr-column {
                width: 50%;
                display: flex;
                justify-content: space-between;
            }

                .layout .center-panel .attributes .attr-row .attr-column .attr-cell {
                    margin-top: 20px;
                }

                .layout .center-panel .attributes .attr-row .attr-column .name-cell {
                    text-align: right;
                    height: 30px;
                    line-height: 30px;
                    width: 30%;
                }

                .layout .center-panel .attributes .attr-row .attr-column .value-cell {
                    width: 70%;
                }

                    .layout .center-panel .attributes .attr-row .attr-column .value-cell input {
                        width: 300px;
                    }

        .layout .center-panel .container-panel {
            min-height: 500px;
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
            width:100%;
            padding-top: 5px;
            padding-bottom: 5px;
            padding:5px 10px;
        }
        .layout .center-panel .container-panel .container {
            min-height: 500px;
            width: 100%;
        }

            .layout .center-panel .container-panel{
                margin-top:40px;
            }